/**
 * Created by Adi(adi@imeth.cn) on 2018/8/29.
 */
import React, { Fragment } from 'react';
import Page from 'src/routes/Page';
import {
  Card,
  Button,
  Divider,
  Form,
  Input,
  Menu,
  Switch,
  Upload,
  Icon,
} from 'antd';
import StandardTable from 'src/components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import Selector from 'src/components/selector/Selector';
import OperateModelView from 'src/components/operateModelView/OperateModelView';
import BasicModelView from 'src/components/basicModelView/BasicModelView';
import QueryData from 'src/components/queryData/QueryData';
import { autobind } from 'core-decorators';
import { connect } from 'dva';
import UploadFile from 'src/components/uploadFile/UploadFile';


@connect(({ BankChannel, loading }) => ({
  BankChannel,
  loading: loading.models.BankChannel,
}))
@autobind
class BankChannel extends Page {
  constructor(props) {
    super(props);
    this.state = {
      paging: {},
      results: [],
      selectedRows: [],
      formValues: null,
      dispatch: this.props.dispatch,
      addShow: false,
      updateShow: false,
      deleteShow: false,
      stateShow: false,
      shrink: true,
      queryFromValue: null,
    };
    this.stateList = [{ value: 'OPEN', label: '开启' }, { value: 'CLOSE', label: '关闭' }];
    this.stateObject = {
      OPEN: true,
      CLOSE: false,
    };
  }

  componentDidMount() {
    this.dispatch({
      type: 'BankChannel/bankList',
      payload: {},
    });
  }

  shouldComponentUpdate(props, state) {
    let { BankChannel } = props;

    let { bankListResult, getByIdResult, saveResult, updateResult } = BankChannel;

    this.rollout(bankListResult, false, (result, meg, paging) => {
        this.state.results = result;
        this.state.paging = paging;
      },
      false,
    );

    this.rollout(saveResult, false, result => {
      this.state.addShow = false;
      this.dispatch({
        type: 'BankChannel/bankList',
      });
    }, false);

    if (BankChannel.bankDetail.sign === 'done') {
      BankChannel.bankDetail.sign = 'over';
      this.state.formValues = Bank.bankDetail.result;
      this.state.updateShow = true;
    }

    if (BankChannel.updateStatus.sign === 'done') {
      BankChannel.updateStatus.sign = 'over';
      this.state.updateShow = false;
      this.dispatch({
        type: 'BankChannel/bankList',
      });
    }

    // if (BankChannel.saveStatus.sign === 'done') {
    //   BankChannel.saveStatus.sign = 'over';
    //   this.state.addShow = false;
    //   this.dispatch({
    //     type: 'BankChannel/bankList',
    //   });
    // }

    return this.equal(props, state);
  }

  render() {
    const {
      selectedRows,
      addShow,
      shrink,
      updateShow,
      formValues,
      deleteShow,
      stateShow,
      results,
      paging,
    } = this.state;
    const { loading } = this.props;

    const columns = [
      {
        title: '名称', // 列表显示
        dataIndex: 'name', // 数据展示对应字段
      },
      {
        title: '代号',
        dataIndex: 'code',
      },
      {
        title: '图标',
        dataIndex: 'logoPath',
      },
      {
        title: '总行联行号',
        dataIndex: 'unionCode',
      },

      {
        title: '操作',
        render: (text, record, index) => (
          <Fragment>
            <Button type="primary" onClick={() => this.showUpdateView(text, record, index)}>
              修改
            </Button>
          </Fragment>
        ),
      },
    ];

    // 渲染按钮内容
    const button = (
      <span>
        <Button type="primary" style={{ marginRight: '10px' }} onClick={this.showAddView}>
          新增
        </Button>
      </span>
    );

    // 批量操作下拉菜单
    const menu = (
      <Menu>
        <Menu.Item key="remove">删除</Menu.Item>
        <Menu.Item key="approval" onClick={() => console.info('11', this.state.selectedRows)}>
          批量审批
        </Menu.Item>
      </Menu>
    );

    // 查询显示列表
    const searchList = [
      {
        value: 'name', // 查询对应的数据字段名
        renderItem: <Input placeholder="请输入银行名称"/>, // 对应的渲染内容
      },
      {
        value: 'code',
        renderItem: <Input placeholder="请输入银行代号"/>,
      },
      {
        value: 'unionCode',
        renderItem: <Input placeholder="请输入总行联行号"/>,
      },
    ];

    const formList = [
      {
        label: '名称',
        value: 'name',
        rules: [
          {
            required: true,
            message: '名称不能为空',
          },
        ],
        initialValue: formValues && formValues.name, // 设置初始值 (修改时传入的数据)
        renderItem: <Input placeholder="请输入名称"/>,
      },
      {
        label: '代号',
        value: 'code',
        initialValue: formValues && formValues.sort,
        renderItem: <Input placeholder="请输入排序"/>,
      },
      {
        label: '总行联行号',
        value: 'unionCode',
        rules: [],
        initialValue: formValues && formValues.unionCode,
        renderItem: <Input placeholder="请输入总行联行号"/>,
      },
      {
        label: '图片',
        value: 'file',
        renderItem: <UploadFile name='bankVO' onChange={this.fileChange}/>,
      },
    ];

    return (
      <PageHeaderLayout title="银行信息管理">
        <Card bordered={false}>
          {/*渲染查询内容*/}
          <QueryData
            shrink={shrink}
            queryList={searchList}
            menuExtra={menu}
            selectedRows={selectedRows}
            operateExtra={button}
            onQuery={this.onQuery}
          />
          {/*渲染列表内容*/}
          <StandardTable
            pagination={paging}
            loading={loading}
            selectedRows={selectedRows}
            columns={columns}
            data={results}
            onSelectRow={this._onSelectRow}
            onChange={this._onChange}
          />
        </Card>
        {addShow && (
          <OperateModelView
            visible={addShow}
            title="新增银行信息"
            onCancel={() => this.setState({ addShow: false })}
            formItemList={formList}
            onSubmit={this.save}
          />
        )}
        {updateShow && (
          <OperateModelView
            visible={updateShow}
            title="修改银行信息"
            onCancel={() => this.setState({ updateShow: false })}
            formItemList={formList}
            onSubmit={this.update}
          />
        )}
      </PageHeaderLayout>
    );
  }

  fileChange(file) {
    let { formValues } = this.state;
    formValues.file = file;
    this.setState({formValues: formValues});
  }

  // 行选择
  _onSelectRow(row) {
    this.setState({
      selectedRows: row,
    });
  }

  // 分页 过滤 排序
  _onChange(page, filter, sort) {
    const { dispatch, formValues } = this.state;
    this.state.selectedRows = [];
    dispatch({
      type: 'BankChannel/bankList',
      payload: {
        ...formValues,
        current: page.current,
        size: page.pageSize,
      },
    });
  }

  // 显示新增弹窗
  showAddView() {
    this.setState({ formValues: {}, addShow: true });
  }

  // 显示修改弹窗
  // text 为当前行的值
  // record 为当前行数据
  // index 为当前行索引
  showUpdateView(text, record, index) {
    //  获取详情
    this.dispatch({
      type: 'BankChannel/getById',
      payload: {
        id: record.id,
      },
    });
  }

  //  查询方法
  onQuery(formValues) {
    this.setState({ queryFromValue: formValues });
    this.dispatch({
      type: 'BankChannel/bankList',
      payload: {
        ...formValues,
      },
    });
  }

  // 保存
  // formValues 为表单数据
  save(formValues) {
    formValues.file = this.state.formValues.file;
    this.dispatch({
      type: 'BankChannel/save',
      payload: {
        ...formValues,
      },
    });
  }

  // 修改
  // formValues 为表单数据
  update(formValues) {
    formValues = Object.assign({}, this.state.formValues, formValues);
    this.dispatch({
      type: 'BankChannel/update',
      payload: {
        ...formValues,
      },
    });
  }

  delete() {
    this.setState({ deleteShow: false });
  }

}

export default BankChannel;
